import * as React from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { useState } from 'react';
import { useLocalStorage } from 'react-use';
import toast from 'react-hot-toast';


export default function Add() {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');
    const [memos, setMemos] = useLocalStorage('memos', []);

function handleAdd() {
    const newMemo = {
        id: Date.now(),
        title: title,
        content: content
    };
    setMemos([...memos, newMemo]);
    // alert('添加成功');
    toast.success('添加成功');
}

  return (
  
        <form style={{display: 'flex', flexDirection: 'column',
             alignItems: 'center'}}>
            <TextField id="outlined-basic" label="title" 
                variant="outlined" 
                style={{marginBottom: '10px'}}
                onChange={(e) => setTitle(e.target.value)}
                />
            <br/>
            <TextField
                id="outlined-multiline-static"
                label="content"
                multiline
                rows={4}
                style={{marginBottom: '10px'}}
                onChange={(e) => setContent(e.target.value)}
                />
            <br/>
            <Button variant="contained" color="primary"
            onClick={handleAdd}
            >
                Add
            </Button>
        </form>
        
  )
}
